<template>
  <div class="center-setting">
    <Breadcrumb :options="crumbOptions"></Breadcrumb>
    <div class="policyDetail">
      <div class="policyDetail-content" style="width: 100%">
        <div class="title">{{ result.name }}</div>
        <div class="summary">
          <span>网点类型：{{ typeList[result.type] }}</span>
          <span>网点坐标：{{ `[${result.xpos},${result.ypos}]` }}</span>
          <span>网点地址：{{ result.site }}</span>
          <span>网点电话：{{ result.telephone }}</span>
        </div>
        <div class="content">
          <div v-html="result.content"></div>
          <img
            :src="result && result.fileVo && result.fileVo.filePath"
            :alt="result && result.fileVo && result.fileVo.fileName"
            class="mt20"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Breadcrumb from '@/components/common/Breadcrumb'
import { getCurrentCrumb } from '@/utils/crumb.js'
import { getServiceStationDetail } from '@/api/serviceStation'

export default {
  components: {
    Breadcrumb
  },
  data() {
    return {
      crumbOptions: [],
      result: [],
      typeList:['知识产权保护工作站','知识产权纠纷人民调解委员会','知识产权保护中心','知识产权快速维权中心','国家知识产权信息公共服务备案网点','技术与创新支持中心TISC']
    }
  },
  created() {
    this.settingCrumb()
  },
  mounted() {
    this.initData()
  },
  methods: {
    async initData() {
      const { id } = this.$route.query
      const { data } = await getServiceStationDetail(id)
      this.result = data
    },
    settingCrumb() {
      const { path } = this.$route
      const crumbOptions = getCurrentCrumb(path)
      this.crumbOptions = crumbOptions
    },
  }
}
</script>